<template>
  <div class="rule-scenarios-container">
    <div class="content-wrapper">
      <h2>规则场景管理</h2>

      <!-- 规则场景查询 -->
      <div class="query-section">
        <span>规则场景key：</span>
        <el-input
          v-model="ruleScenariosQueryParams.scenariosKey"
          class="input-field"
          placeholder="请输入"
        />
        <span>规则场景名称：</span>
        <el-input
          v-model="ruleScenariosQueryParams.scenariosName"
          class="input-field"
          placeholder="请输入"
        />
        <span>启用状态：</span>
        <el-radio-group v-model="ruleScenariosQueryParams.isEnable">
          <el-radio :value="0">启用</el-radio>
          <el-radio :value="1">未启用</el-radio>
        </el-radio-group>
        <div class="button-section">
          <el-button
            type="primary"
            :icon="Search"
            @click="searchRuleScenariosByQueryParam(ruleScenariosQueryParams)"
            >搜索</el-button
          >
          <el-button
            type="success"
            :icon="Plus"
            @click="insertRuleScenariosWindowEnable = true"
            >新增</el-button
          >
        </div>
      </div>

      <!-- 规则场景列表 -->
      <div class="table-section">
        <el-table
          stripe
          border
          :data="paginatedRuleScenarios"
          class="rule-scenarios-table"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        >
          <el-table-column label="id" width="100" align="center">
            <template #default="scope">
              <el-popover
                effect="light"
                trigger="hover"
                placement="top"
                width="auto"
              >
                <template #default>
                  <div>{{ scope.row.id }}</div>
                </template>
                <template #reference>
                  <el-tag>{{ scope.row.id.toString().substring(0, 4) }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="规则场景key" width="180" align="center">
            <template #default="scope">
              <span>{{ scope.row.scenariosKey }}</span>
            </template>
          </el-table-column>
          <el-table-column label="规则场景名称" width="180" align="center">
            <template #default="scope">
              <span>{{ scope.row.scenariosName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="条件模型" width="150" align="center">
            <template #default="scope">
              <span>{{ scope.row.conditionModelName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结果模型" width="150" align="center">
            <template #default="scope">
              <span>{{ scope.row.resultModelName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="描述" width="150" align="center">
            <template #default="scope">
              <el-popover
                effect="light"
                trigger="hover"
                placement="top"
                width="auto"
              >
                <template #default>
                  <div>{{ scope.row.description }}</div>
                </template>
                <template #reference>
                  <el-tag>{{ scope.row.description.substring(0, 4) }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
              <span>{{ scope.row.isEnable == 0 ? "启用" : "未启用" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center">
            <template #default="scope">
              <el-button
                type="warning"
                size="small"
                :icon="Edit"
                @click="updateRuleScenariosInfo(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="small"
                :icon="Delete"
                @click="deleteRuleScenarios(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 添加分页组件 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="ruleScenariosCurrentPage"
            v-model:page-size="ruleScenariosPageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="ruleScenariosInfoList.length"
            @size-change="ruleScenariosHandleSizeChange"
            @current-change="ruleScenariosHandleCurrentChange"
          />
        </div>
      </div>
      <!-- 新增规则场景 -->
      <el-dialog v-model="insertRuleScenariosWindowEnable" title="新增业务模型">
        <el-form :model="insertRuleScenarios" label-width="120px">
          <el-form-item label="规则场景key">
            <el-input v-model="insertRuleScenarios.scenariosKey"></el-input>
          </el-form-item>
          <el-form-item label="规则场景名称">
            <el-input v-model="insertRuleScenarios.scenariosName"></el-input>
          </el-form-item>
          <el-form-item label="条件模型">
            <el-autocomplete
              v-model="insertRuleScenarios.conditionModelName"
              :fetch-suggestions="autoCompleteQuerySearch"
              popper-class="my-autocomplete"
              placeholder="请选择业务模型"
              @select="
                insertRuleScenariosAutoCompleteConditionModelHandleSeletct
              "
            >
              <template #suffix>
                <el-icon
                  class="el-input__icon"
                  @click="actoCompleteHandleIconClick"
                >
                  <edit />
                </el-icon>
              </template>
              <template #default="{ item }">
                <div class="value">{{ item.key }} {{ item.value }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="结果模型">
            <el-autocomplete
              v-model="insertRuleScenarios.resultModelName"
              :fetch-suggestions="autoCompleteQuerySearch"
              popper-class="my-autocomplete"
              placeholder="请选择业务模型"
              @select="insertRuleScenariosAutoCompleteResultModelHandleSeletct"
            >
              <template #suffix>
                <el-icon
                  class="el-input__icon"
                  @click="actoCompleteHandleIconClick"
                >
                  <edit />
                </el-icon>
              </template>
              <template #default="{ item }">
                <div class="value">{{ item.key }} {{ item.value }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="insertRuleScenarios.description"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-radio-group v-model="insertRuleScenarios.isEnable">
              <el-radio :value="0">启用</el-radio>
              <el-radio :value="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="insertRuleScenariosWindowEnable = false"
              >取消</el-button
            >
            <el-button
              type="primary"
              @click="insertRuleScenariosOnSubmit(insertRuleScenarios)"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
      <!-- 修改规则场景 -->
      <el-dialog v-model="updateRuleScenariosWindowEnable" title="修改业务模型">
        <el-form :model="updateRuleScenarios" label-width="120px">
          <el-form-item label="规则场景key">
            <el-input disabled v-model="updateRuleScenarios.scenariosKey"></el-input>
          </el-form-item>
          <el-form-item label="规则场景名称">
            <el-input v-model="updateRuleScenarios.scenariosName"></el-input>
          </el-form-item>
          <el-form-item label="条件模型">
            <el-autocomplete
              v-model="updateRuleScenarios.conditionModelName"
              :fetch-suggestions="autoCompleteQuerySearch"
              popper-class="my-autocomplete"
              placeholder="请选择业务模型"
              @select="
                updateRuleScenariosAutoCompleteConditionModelHandleSeletct
              "
            >
              <template #suffix>
                <el-icon
                  class="el-input__icon"
                  @click="actoCompleteHandleIconClick"
                >
                  <edit />
                </el-icon>
              </template>
              <template #default="{ item }">
                <div class="value">{{ item.key }} {{ item.value }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="结果模型">
            <el-autocomplete
              v-model="updateRuleScenarios.resultModelName"
              :fetch-suggestions="autoCompleteQuerySearch"
              popper-class="my-autocomplete"
              placeholder="请选择业务模型"
              @select="updateRuleScenariosAutoCompleteResultModelHandleSeletct"
            >
              <template #suffix>
                <el-icon
                  class="el-input__icon"
                  @click="actoCompleteHandleIconClick"
                >
                  <edit />
                </el-icon>
              </template>
              <template #default="{ item }">
                <div class="value">{{ item.key }} {{ item.value }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="updateRuleScenarios.description"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-radio-group v-model="updateRuleScenarios.isEnable">
              <el-radio :value="0">启用</el-radio>
              <el-radio :value="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="updateRuleScenariosWindowEnable = false"
              >取消</el-button
            >
            <el-button
              type="primary"
              @click="updateRuleScenariosOnSubmit(updateRuleScenarios)"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { Search, Edit, Delete, Plus } from "@element-plus/icons-vue";
import {
  type RuleScenariosSave,
  type RuleScenariosQueryParams,
  type BusinessModelOptionInfo,
} from "@/types";
import useRuleScenarios from "@/hooks/useRuleScenarios";
import useCommon from "@/hooks/useCommon";
import { ElMessage } from "element-plus";
const {
  insertRuleScenariosWindowEnable,
  updateRuleScenariosWindowEnable,
  ruleScenariosQueryParams,
  insertRuleScenarios,
  updateRuleScenarios,
  ruleScenariosInfoList,
  ruleScenariosCurrentPage,
  ruleScenariosPageSize,
  searchRuleScenariosByQueryParam,
  deleteRuleScenarios,
  insertRuleScenariosOnSubmit,
  updateRuleScenariosOnSubmit,
  autoCompleteQuerySearch,
  actoCompleteHandleIconClick,
  loadBusinessModelOptionList,
  updateRuleScenariosInfo,
  ruleScenariosHandleCurrentChange,
  ruleScenariosHandleSizeChange,
  insertRuleScenariosAutoCompleteConditionModelHandleSeletct,
  insertRuleScenariosAutoCompleteResultModelHandleSeletct,
  updateRuleScenariosAutoCompleteConditionModelHandleSeletct,
  updateRuleScenariosAutoCompleteResultModelHandleSeletct,
} = useRuleScenarios();

const paginatedRuleScenarios = computed(() => {
  const start =
    (ruleScenariosCurrentPage.value - 1) * ruleScenariosPageSize.value;
  const end = start + ruleScenariosPageSize.value;
  return ruleScenariosInfoList.slice(start, end);
});

onMounted(() => {
  searchRuleScenariosByQueryParam(ruleScenariosQueryParams);
  // 获取业务模型列表
  loadBusinessModelOptionList();
});
</script>

<style scoped>
.rule-scenarios-container {
  margin: 0 auto;
  padding: 15px;
}

.rule-scenarios-container h2 {
  font-size: 22px;
  color: #303133;
  margin-bottom: 20px;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.table-section {
  background: #fff;
  padding: 10px 0;
}

.page-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 24px;
  border-bottom: 2px solid #eee;
  padding-bottom: 12px;
}

.content-wrapper {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.query-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px; /* 添加内边距 */
  background: #f5f7fa; /* 背景色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 阴影 */
}

.button-section {
  margin-left: 20px;
}

.input-field {
  width: 240px;
  margin-right: 10px;
}

.rule-scenarios-table,
.rule-scenarios-item-table {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
